<template>
  <div class="container">
    <div class="ui-title">基础用法</div>
    <cell-group :radius="10" width="95%">
      <cell title="基础用法" link @click="showPopup()" />
    </cell-group>

    <action-sheet
      v-model="show"
      :actions="actions"
      :styles="{ height }"
      @select="onSelect"
    />
  </div>
</template>

<script>
import CellGroup from "../../components/cell-group";
import Cell from "../../components/cell";
import ActionSheet from "../../components/action-sheet";
export default {
  components: {
    CellGroup,
    Cell,
    ActionSheet,
  },
  data() {
    return {
      show: false,
      actions: [{ name: "选项一" }, { name: "选项二" }, { name: "选项三" }],
      height: "188px",
    };
  },
  methods: {
    showPopup() {
      this.show = !this.show;
    },
    onSelect() {},
  },
};
</script>


<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: #f7f8fa;
  overflow: hidden;
}
</style>